<template>
  <section class="root-cotainer">
    <LayoutHeader></LayoutHeader>
    <main class="root-main">
      <aside class="root-aside" v-if="route.meta && route.meta.showSidebar">
        <LayoutAside></LayoutAside>
      </aside>
      <section class="root-right">
        <router-view :key="route.fullPath"></router-view>
      </section>
    </main>
  </section>
</template>

<script setup lang="ts">
import { onMounted } from 'vue';
import { useRoute } from 'vue-router';
import LayoutAside from '@/layout/aside/index.vue';
import LayoutHeader from '@/layout/header/index.vue';
const route = useRoute();

onMounted(() => {});
</script>

<style lang="scss" scoped>
.root-cotainer {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}
.root-main {
  display: flex;
  height: calc(100% - 65px);
  width: 100%;
  padding: 12px 16px;
  box-sizing: border-box;
}

.root-aside {
  box-sizing: border-box;
  padding: 8px;
  margin-right: 10px;
  background-color: #ffffff;
  border-radius: 10px;
}

.root-right {
  height: 100%;
  flex: 1;
  overflow: hidden;
  border-radius: 12px;
  box-sizing: border-box;
}
</style>
